<template>
    <div class="app-container score_ex_exam_place">
        <el-card class="box-card" :key="index">
            <div slot="header" class="clearfix">
                <span style="font-size: 17px;font-weight: bold;">考场{{ index + 1 }}</span>
                <div class="card_header_button_box">
                    <div class="card_header_button_delete">
                        <el-button class="card_header_button" type="text" icon="el-icon-circle-close" size="medium" :disabled="disabled" @click="handleDelete"/>
                    </div>
                    <div class="card_header_button_option">
                        <el-button class="card_header_button" type="text" icon="el-icon-back" size="medium" v-show="index !== 0" :disabled="disabled" @click="placeForward"/>
                        <el-button class="card_header_button" type="text" icon="el-icon-right" size="medium" v-show="index !== length-1" :disabled="disabled" @click="placeBack"/>
                    </div>
                </div>
            </div>
            <el-form style="margin: 0;padding: 0" label-width="55px" size="mini" :disabled="disabled">
                <el-form-item label="排队" prop="waitNum">
                    <el-input-number :min="1" v-model="place.waitNum" placeholder="排队人数" :disabled="disabled" style="width: 215px;"/>
                </el-form-item>
                <el-form-item label="考场数" prop="num">
                    <el-input-number :min="1" v-model="place.num" placeholder="考场数量" :disabled="disabled" style="width: 215px;"/>
                </el-form-item>
                <el-form-item label="科室" prop="deptId">
                    <treeselect v-model="place.deptId" :options="deptOptions" :props="defaultProps" :defaultExpandLevel="Infinity" :show-count="true" :disabled="disabled" clearable placeholder="请选择科室"/>
                </el-form-item>
                <el-form-item label="技能" prop="skillId">
                    <el-select v-model="place.skillId" placeholder="请选择技能" clearable style="width: 215px">
                        <el-option v-for="item in skillList" :key="item.id" :value="item.id" :label="item.name + '    (时长:' + (item.exDuration/60) + '分钟)'"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="评分表" prop="sheetId">
                    <el-select v-model="place.sheetArr" multiple placeholder="请选择评分表(多选)" clearable style="width: 215px">
                        <el-option v-for="item in sheetList" :key="item.id" :value="item.id" :label="item.name"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="考场" prop="placeId">
                    <el-select v-model="place.placeId" :placeholder="`考场${index+1}`" clearable style="width: 215px">
                        <el-option v-for="item in ex_placeList" :key="item.id" :value="item.id" :label="item.name"/>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import {listSkill} from "@/api/score/skill";
import {listSheet} from "@/api/score/sheet";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {isNotNull} from "@/utils/zzDouUtils/objUtil";


export default {
    name: "ex_exam_place",
    components: {Treeselect},
    props: {
        place: {
            type: Object,
        },
        index: {
            type: Number
        },
        length:{
            type: Number
        },
        disabled:{
            type: Boolean,
            default: false,
        },
        deptOptions:{  // 科室树选项
            type: Array,
            default: []
        },
        ex_placeList:{//考站列表
            type: Array,
            default: [],
        }
    },
    watch: {
        'place.deptId'(n, o) {
            this.skillList = [];
            this.place.skillId = null;
            this.getSkillList(n);
        },
        'place.skillId'(n, o) {
            this.sheetList = [];
            this.place.sheetId = null;
            this.getSkillModelList(n);
        }
    },
    data() {
        return {
            deptList: [],
            skillList: [],
            sheetList: [],
            defaultProps: {
                children: "children",
                label: "label"
            },
        };
    },
    created() {
        this.getSkillList(this.place.deptId);
        this.getSkillModelList(this.place.skillId);
    },
    methods: {
        /** 查询技能管理列表 */
        getSkillList(deptId) {
            if (isNotNull(deptId)) {
                listSkill({pageSize: 1000, pageNum: 1, deptId: deptId}).then(response => {
                    this.skillList = response.rows;
                });
            }
        },
        /** 查询技能下评分表列表 */
        getSkillModelList(skillId){
            if (isNotNull(skillId)) {
                listSheet({skillId:skillId,pageSize:1000}).then(response=>{
                    this.sheetList = response.rows;
                })
            }
        },
        /** 删除 */
        handleDelete() {
            this.$emit("handleDeleteScoreExModelPlace", this.index);
        },
        /** 前进 */
        placeForward(){
            this.$emit("placePositionChange", true,this.index);
        },
        /** 后退 */
        placeBack(){
            this.$emit("placePositionChange", false,this.index);
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        }
    }
};
</script>
<style>
.score_ex_exam_place .box-card { /* 单个卡片 */
    width: 300px;
    padding: 0;
    overflow: auto;
}

.score_ex_exam_place .card_header_button_box{
    float: right;
    margin-top: -15px;: 0;
}

.score_ex_exam_place .card_header_button{
    margin-top: -6px;
    padding: 0;
}

.score_ex_exam_place .card_header_button_delete{
    width: 100%;
    height: 20px;
    text-align: right;
}
.score_ex_exam_place .card_header_button_option{
    width: 100%;
    height: 20px;
    float:  right;
}

.score_ex_exam_place .el-card{
    border-radius: 15px;
    border-color: #C0C4CC;
}
.score_ex_exam_place .el-card__header{
    background: #E6FEEE;
}
.score_ex_exam_place .el-card__body{
    background: #F5FEF2;
    padding-left: 5px;
    height: auto;
}


.score_ex_exam_place .vue-treeselect {
    width: 203px;
    height: 28px;
}

.score_ex_exam_place .vue-treeselect__menu {
    overflow-x: scroll !important;
    width: 250px;
    max-height: 180px !important;
}

.score_ex_exam_place .vue-treeselect__label {
    overflow: unset;
    text-overflow: unset;
}

.score_ex_exam_place .vue-treeselect__control {
    height: 20px !important;
}

.score_ex_exam_place .vue-treeselect__multi-value-item-container, .vue-treeselect--has-value .vue-treeselect__multi-value {
    height: 30px;
    line-height: 24px;
    padding: 0;
}

.score_ex_exam_place .vue-treeselect__limit-tip, .vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value .vue-treeselect__input-container {
    padding-top: 0;
}


.score_ex_exam_place .vue-treeselect__placeholder, .vue-treeselect__single-value {
    height: 28px;
    line-height: 32px;
    font-size: small;
}

.score_ex_exam_place .vue-treeselect--has-value .vue-treeselect__input {
    height: 18px !important;
    line-height: 18px !important;
}

.score_ex_exam_place .vue-treeselect div, .vue-treeselect span {
    box-sizing: content-box;
}

.score_ex_exam_place .vue-treeselect__multi-value-label {
    display: block;
    width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.score_ex_exam_place .vue-treeselect__value-container {
    display: block;
    height: 32px;
}
</style>
